<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购-登录/注册</title>
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <script src="../../public/js/axios.min.js"></script>


    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./login.css">
</head>

<body>
    <div id="app">

        <div class="bg">
            <div class="login-bg" :class="[signUpMode?'login-bg-left':'login-bg-right']">
                <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInLeft"
                    leave-active-class="animate__animated animate__fadeOutLeft">

                    <div class="login" v-show="!signUpMode">
                        <el-tooltip class="item" effect="dark" content="返回首页" placement="bottom">
                            <a href="../index/index.html">秒优购</a>
                        </el-tooltip>

                        <h2>我们不生产食品,只为您挑选最优秀的食品</h2>
                        <p @click="switchMode()" class="button">已有账号？去 登录</p>
                    </div>
                </transition>
                <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInRight"
                    leave-active-class="animate__animated animate__fadeOutRight">
                    <div class="register" v-show="signUpMode">
                        <el-tooltip class="item" effect="dark" content="返回首页" placement="bottom">
                            <a href="../index/index.html">秒优购</a>
                        </el-tooltip>
                        <h2>价格优惠,秒速送达</h2>
                        <p @click="switchMode()" class="button">没有账号？ 去 注册</p>

                    </div>
                </transition>
            </div>

            <div class="login-box" :class="[signUpMode?'login-box-right':'login-box-left']">

                <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInRight"
                    leave-active-class="animate__animated animate__fadeOutRight">
                    <div class="login-form" v-show="signUpMode&&showBox==1">
                        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
                            <el-form-item label="账号" prop="username">
                                <el-input v-model="loginForm.username" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="passwd">
                                <el-input v-model="loginForm.passwd" show-password placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitLogin()">立即登录</el-button>
                                <el-button type="info" @click="switchReset(3)">忘记密码</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </transition>
                <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInRight"
                    leave-active-class="animate__animated animate__fadeOutRight">
                    <div class="rest-form" v-show="signUpMode&&showBox==3">
                        <el-form :model="resetForm" :rules="rules" ref="resetForm" label-width="100px">
                            <el-form-item label="账号" prop="username">
                                <el-input v-model="resetForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="tel">
                                <el-input v-model="resetForm.tel"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="code">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-input v-model="resetForm.code"></el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-button :type="!isGetCode?'primary':'info'" :disabled="isGetCode"
                                            @click="getCode()">{{codeText}}</el-button>
                                    </el-col>
                                </el-row>

                            </el-form-item>
                            <el-form-item label="密码" prop="passwd1">
                                <el-input v-model="resetForm.passwd1" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="passwd2">
                                <el-input v-model="resetForm.passwd2" show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitResete()">重置密码</el-button>
                                <el-button type="info" @click="switchReset(1)">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </transition>
                <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInLeft"
                    leave-active-class="animate__animated animate__fadeOutLeft">
                    <div class="login-form" v-show="!signUpMode&&showBox==1">
                        <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="100px">

                            <el-form-item label="手机号" prop="tel">
                                <el-input v-model="registerForm.tel"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="code">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-input v-model="registerForm.code"></el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-button :type="!isGetCode?'primary':'info'" :disabled="isGetCode"
                                            @click="getCode()">{{codeText}}</el-button>
                                    </el-col>
                                </el-row>

                            </el-form-item>
                            <el-form-item label="密码" prop="passwd1">
                                <el-input v-model="registerForm.passwd1" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="passwd22">
                                <el-input v-model="registerForm.passwd22" show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitRegister()">立即注册</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </transition>
            </div>

        </div>


        <!-- foot -->
        <footer>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>

                    </li>
                </ul>
            </div>
        </el-backtop>
    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.resetForm.passwd1) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validatePass22 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.passwd1) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {

                codeText: "获取验证码",
                isGetCode: false, //是否获取过验证码
                codeSecond: 59, //倒计时剩余秒数
                signUpMode: true, //当前状态 true 登录 false 注册
                showBox: 1, //控制切换 1显示表单 0隐藏表单
                loginForm: {

                    username: '',
                    passwd: ''
                }, //登录表单
                resetForm: {
                    username: '',
                    tel: '',
                    code: '',
                    passwd1: '',
                    passwd2: '',
                }, //重置密码表单
                registerForm: {
                    tel: '',
                    code: '',
                    passwd1: '',
                    passwd22: '',
                }, //注册表单

                rules: {
                    username: [{
                        required: true,
                        message: '账号不能为空',
                        trigger: 'blur'
                    }],
                    passwd: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
                    passwd1: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
                    passwd2: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    passwd22: [{
                        required: true,
                        validator: validatePass22,
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '验证码不能为空',
                        trigger: 'blur'
                    }],
                    tel: [{
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('手机号不能为空'));
                            } else if (!(/^1[3|4|5|7|8]\d{9}$/.test(value))) {
                                callback(new Error('手机号码格式非法'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }]
                }, //表单验证规则

            }

        },
        mounted() {},
        methods: {
            // 切换 登录或注册
            switchMode() {
                if (this.signUpMode) {
                    this.signUpMode = false
                    this.showBox = 0
                    setTimeout(() => {
                        this.showBox = 1
                    }, 900);
                } else {
                    this.signUpMode = true
                    this.showBox = 0
                    setTimeout(() => {
                        this.showBox = 1
                    }, 900);
                }
            },
            //提交登录
            submitLogin() {
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {

                        axios.post(baseUrl + '/common/customer/login', {
                                cusTel: this.loginForm.username,
                                cusPasswd: this.loginForm.passwd,

                            })
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '登录成功',
                                        type: 'success'
                                    });
                                    sessionStorage.setItem("userInfo", JSON.stringify(response.data
                                        .data))
                                    window.location.href = '../index/index.html';
                                } else {
                                    this.$message({
                                        message: response.data.data,
                                        type: 'error'
                                    });

                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });




                    } else {

                        return false;
                    }
                });
            },
            //重置密码提交
            submitResete() {
                this.$refs['resetForm'].validate((valid) => {
                    if (valid) {
                        axios.post(baseUrl + '/common/customer/restPwd', {
                                tel: this.resetForm.tel,
                                passwd: this.resetForm.passwd1,
                                cusId: this.resetForm.username,
                                code: this.resetForm.code
                            })
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '密码修改成功',
                                        type: 'success'
                                    });
                                    this.switchReset(1)
                                } else {
                                    this.$message({
                                        message: response.data.data,
                                        type: 'error'
                                    });

                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    } else {

                        return false;
                    }
                });
            },
            //注册提交
            submitRegister() {
                this.$refs['registerForm'].validate((valid) => {
                    if (valid) {
                        axios.post(baseUrl + '/common/customer/register', {
                                tel: this.registerForm.tel,
                                passwd: this.registerForm.passwd1,
                                code: this.registerForm.code
                            })
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '注册成功',
                                        type: 'success'
                                    });
                                    this.switchReset(1)
                                } else {
                                    this.$message({
                                        message: response.data.data,
                                        type: 'error'
                                    });

                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        return false;
                    }
                });
            },
            //获取验证码
            getCode() {

                console.log(this.showBox);
                if (this.isGetCode) {

                } else {
                    this.isGetCode = true;
                    if (this.showBox == 3) {
                        //重置密码
                        // 为给定 ID 的 user 创建请求
                        axios.get(baseUrl + '/common/sendSms?phoneNumbers=' + this.resetForm.tel + '&msgType=2')
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '发送成功，请注意查收',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '发送失败',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    } else {
                        //注册
                        axios.get(baseUrl + '/common/sendSms?phoneNumbers=' + this.registerForm.tel +
                                '&msgType=1')
                            .then((response) => {
                                if (response.data.code == 2000) {
                                    this.$message({
                                        message: '发送成功，请注意查收',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '发送失败',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }

                    const timer = setInterval(() => {
                        this.codeText = this.codeSecond + "秒后重新获取";
                        if (this.codeSecond-- <= 0) {
                            clearInterval(timer);
                            this.isGetCode = false;
                            this.codeText = "获取验证码";
                            this.codeSecond = 59;
                        }
                    }, 1000);
                }
            },
            //登录与忘记密码切换
            switchReset(i) {
                this.showBox = 0
                setTimeout(() => {
                    this.showBox = i
                }, 900);
            }
        },

    })
</script>

</html>